import { useEffect, useState } from 'react'
import '../index.css'
import store from './redux/store';
import ProfileSetting from './ProfileSetting'

export default function User() {
    return <>
        <p>
            常见需求：修改用户名 <br />
            用户名位于header中，个人设置页面修改后需要同步更新右上角的用户名
        </p>
        <h1>redux：store_reducer版本</h1>
        <Header />
        <Setting />
        <Summary />
    </>;
}

function Setting(props) {
    return (
        <div className='setting'>
            设置页面：
            <ProfileSetting />
            其它设置 <br />
            消息通知设置...

        </div>
    );
}

function Summary() {
    return <p>
        总结： <br />
        优点：<br />
        1. 把dispatch中的type提取到了action中，可能是为了方便和reducer进行映射吧。 <br />
        但是这不麻烦吗，或者不如和reducer放在一起? <br />
        2. 对于异步操作，比如fetch，为了保持统一，也可以写在action中，thunk回调，promise返回promise; <br />
        dispatch的时机交给了redux来调用。 <br />
        缺点：<br />
        1. 依旧要store.subscribe 和 setState组合，还是有点麻烦的，需要继续优化<br />
        2. store入侵到了组件中，组件需要知道store的存在，而且store.dispatch
    </p>
}


export function Header() {
    // 只有这两个状态更新，才会render, 但是还是要去订阅，销毁订阅
    const [username, setUsername] = useState(store.getState().username);
    const [unReadCount, setUnReadCount] = useState(store.getState().unReadCount);
    useEffect(() => {
        const unsubscribe = store.subscribe(() => {
            setUsername(store.getState().username);
            setUnReadCount(store.getState().unReadCount);
        })
        return () => {
            unsubscribe();
        }
    }, []);


    return (
        <div className='header'>
            <span>{username}</span>

            <span className='un-read'>
                未读
                <div className='un-read-num'>{unReadCount}</div>
            </span>
        </div>
    )
}